<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/script/echarts.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/script/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/layui/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/public.css" media="all" />
</head>
<body>

<form class="layui-form">
    <div class="layui-form-item">
    <label class="layui-form-label">选择车辆:</label>
    <div class="layui-input-inline ">
            <select id="carSearch" name="carid" lay-filter="carid">
                <option></option>
            </select>
        </div>
    </div>
</form>

<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript" src="/static/layui/layui/layui.js"></script>
<script type="text/javascript">

    $(function () {

        layui.use('form', function(){
            var form = layui.form;

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            myChart.setOption({
                series : [
                    {
                        name: '车辆总费用汇总',
                        type: 'pie',
                        radius: '70%',
                        data:[]
                    }
                ]
            });
            // 使用刚指定的配置项和数据显示图表。
            myChart.showLoading();

            $.ajax({
                url:"/price/totalprice",
                type:"post",
                success:function (res) {
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        series: [{
                            name: '车辆总费用分布',
                            data:[
                                {value:res.totalPrice1, name:'出车费用'},
                                {value:res.totalPrice2, name:'加油费用'},
                                {value:res.totalPrice3, name:'维修费用'},
                                {value:res.totalPrice4, name:'规费费用'},
                                {value:res.totalPrice5, name:'保养费用'},
                                {value:res.totalPrice6, name:'违章费用'},
                                {value:res.totalPrice7, name:'年检费用'},
                                {value:res.totalPrice8, name:'保险费用'}
                            ]
                        }]
                    });
                }
            });

            //显示所有车辆信息
            $.ajax({
                url:"/petrolRecord/getCar",
                type:"post",
                success:function (data) {
                    for(var i=0;i<data.length;i++){
                        var op=$("<option></option>");
                        op.attr('value',data[i].carid);
                        op.append(data[i].carplate);
                        $("#carSearch").append(op);
                    }
                    form.render('select');//表单渲染，得渲染才会有效果显示出来
                }
            });



            form.on('select(carid)', function(data){
                $.ajax({
                    url:"/price/totalPriceByCarid",
                    type:"post",
                    data:{"carid":data.value},
                    success:function (res) {
                        myChart.showLoading();
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({        //加载数据图表
                            series: [{
                                name: '单车辆费用分布',
                                data:[
                                    {value:res.totalPrice1, name:'出车费用'},
                                    {value:res.totalPrice2, name:'加油费用'},
                                    {value:res.totalPrice3, name:'维修费用'},
                                    {value:res.totalPrice4, name:'规费费用'},
                                    {value:res.totalPrice5, name:'保养费用'},
                                    {value:res.totalPrice6, name:'违章费用'},
                                    {value:res.totalPrice7, name:'年检费用'},
                                    {value:res.totalPrice8, name:'保险费用'}
                                ]
                            }]
                        });
                    }
                });
            });
        });
    });





</script>
</body>
</html>
